<template>
  <div class="shoot-area-table">
    <el-table
            :data="shootAreaData"
            show-summary
            :summary-method="getSummaries"
            style="width: 100%">
      <el-table-column
              prop="area"
              label=""
              width="75">
      </el-table-column>
      <el-table-column
              prop="passAfterDribble"
              label="盘带传球"
              sortable
              width="100">
      </el-table-column>
      <el-table-column
              prop="shootAfterDribble"
              label="盘带射门"
              sortable
              width="100">
      </el-table-column>
      <el-table-column
            prop="passAfterBreakThrough"
            label="过人传球"
            sortable
            width="100">
      </el-table-column>
      <el-table-column
              prop="passAfterBreakThrough"
              label="过人射门"
              sortable
              width="100">
      </el-table-column>
      <el-table-column
              prop="lose"
              label="丢失球权"
              sortable
              width="100">
      </el-table-column>
      <el-table-column
              prop="others"
              label="其他"
              sortable
              width="100">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "ShootAreaTable",
    data(){
      return {
        shootAreaData:[
          {area:'禁区内',passAfterDribble:10,shootAfterDribble:12,passAfterBreakThrough:5,shootAfterBreakThrough:12,lose:12,others:15},
          {area:'进攻三区',passAfterDribble:10,shootAfterDribble:12,passAfterBreakThrough:5,shootAfterBreakThrough:12,lose:12,others:15},
          {area:'中场三区',passAfterDribble:10,shootAfterDribble:12,passAfterBreakThrough:10,shootAfterBreakThrough:13,lose:12,others:17},
          {area:'防守三区',passAfterDribble:10,shootAfterDribble:12,passAfterBreakThrough:5,shootAfterBreakThrough:12,lose:15,others:15},
        ]
      }
    },
    methods:{
      //合计规则函数
      getSummaries(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column,index)=>{
          const values = data.map((item) =>{
            return item[column.property]
          });
          if (index === 0) {
            sums[index] = '合计';
          } else {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            },0);
          }
        });
        return sums
      },
    }
  }
</script>

<style scoped>
   .shoot-area-table {
     width: 100%;
     height: 190px;
     color:#656F73;
     background-color: blue;
   }
   .el-table {
     /*margin-top: 5px;*/
     /*border-color: red;*/
     font-size: 13px;
     /*line-height: 10px;*/
     /*background-color: #B500FE;*/
     /*font-weight: bold;*/
   }
   .shoot-area-table /deep/ .el-table td {
     padding: 6px 0;
     text-align: center;
     background-color: #f1f6f9;
   }
   .shoot-area-table /deep/ .is-leaf {
     padding: 5px 0 ;
     background-color: #f1f6f9;
     text-align: center;
   }

</style>